<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指尖搜索</title>
		<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
		<style>
			*{
				list-style: none;
			}
			
			input,button:focus {
			    outline:none;
			}
			
			.content {
				width: 100%;
				margin: 0 auto;
			}
		
			.logo {
				height: 10%;
				width: 60%;
				margin-left: 20%;
				margin-right: 20%;
				margin-top: 6.5rem;
			}
					
			.lazyload{
				height: 30%;
				width: 30%;
				margin-left: 45%;
				margin-right: 45%;
			}
			
			@media all and (max-width: 1600px) {
			    .logo {
			    	height: 10%;
			    	width: 20%;
			    	margin-left: 40%;
			    	margin-right: 40%;
			    	margin-top: 6.5rem;
			    }
				
				.lazyload{
					height: 30%;
					width: 10%;
					margin-left: 45%;
					margin-right: 45%;
				}
			}
			
			@media all and (max-width: 767px) {
			    .logo {
			    	height: 10%;
			    	width: 60%;
			    	margin-left: 20%;
			    	margin-right: 20%;
			    	margin-top: 6.5rem;
			    }
				
				.lazyload{
					height: 30%;
					width: 30%;
					margin-left: 45%;
					margin-right: 45%;
				}
			}
			
			.search-index {
				width: 80%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				border: .5px solid #fb7299;
				padding: 0.625rem;
				border-radius: 15px;
			}
		
			.search-input {
				width: 80%;
				font-size: 1.125rem;
				color: #8f8f94;
				border: none;
			}
			
			.search-submit {
				font-size: 1.125rem;
				color: #fb7299;
				position: relative;
				padding: 0;
				line-height: 0.875rem;
				background-color: transparent;
				border: none;
				cursor: pointer;
			}
			
			/* 播放器 */
			.play-body{
				width: 100%;
				height: 12.5rem;
				background-color: black;
				margin-top: 20px;
				margin-bottom: 30px;
			}
			
			.play-video{
				background-image: url('./img/logo.png');
				background-repeat: no-repeat;
				width: 100%;
				height: 100%;
				border: none;
				background-position: 50% 50%;
			}
			
			/* 搜索列表 */
			.showsearchlist{
				width:80%;
				margin:0 auto;
			}
			
			.showsearchlist ul{
				list-style: none;
				padding:0;
			}
			
			.showsearchlist ul li{
				display:inline-block;
				margin:5px;
			}
			
			.search-li{
				margin-top: 25px;
				border: .25px solid #fb7299;
				padding: 10px;
				box-shadow: 1rpx .25px .25px .25px #8f8f94;
				cursor: pointer;
			}
			
			.search-a{
				font-size: 1rem;
				color: #333;
				text-decoration: none;
			}
			
			/* 播放集数列表 */
			.showplaylist{
				width: 90%;
				margin: 0 auto;
				/* display: flex;
				flex-wrap: wrap;
				justify-content: start;
				align-items: center; */
			}
			
			.play-li{
				margin-top: 10px;
			}
			
			.play-a{
				display:inline-block;
				font-size: 1rem;
				color: #333;
				text-decoration: none;
				padding: 10px;
				margin:3px;
				border: .5px solid #FB7299;
				cursor: pointer;
			}
			
			/* 底部 */
			.search-buttom{
				width: 80%;
				margin: 0 auto 1.875rem;
				clear: both;
				color: #8f8f94;
				font-size: 0.875rem;
				text-align: center;
			}
			.positionFixed{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
			}
			.positionRelative{
				position:relative;
				margin-top:10px;
			}
			.search-ma {
				height: 8.5rem;
				width: 8.5rem;
				margin-left: auto;
				margin-right: auto;
				margin-top: 1.25rem;
				/* margin-bottom: 50px; */
			}
		</style>
	</head>
	<body>
		<div class="content">
			<img class="logo" src="./img/logo.png" v-if="showsearchlogo"></img>
			<div class="search-index" id="mohu" v-if="showsearchinput">
				<input type="text" class="search-input" @keyup.enter="search" v-model="searchname" placeholder="请输入视频名称:"/>
				<button type="submit" class="search-submit" @click="search">搜索</button>
			</div>
			<div v-if="showlazyload">
				<img class="lazyload" src="./img/lazyload.gif"></img>
				<span style="display: block;width: 100%;text-align: center;color: #fb7299;">~~~页面正在加载中~~~</span>
			</div>
			<div class="showsearchlist" v-if="showsearchlist">
				<ul>
					<li v-for="v in lists" :key="v.id" class="search-li">
						<a class="search-a" @click="searchlist(v)">{{v.name}}</a>
					</li>
				</ul>
			</div>
			<div class="play-body" v-if="showplayiframe">
				<iframe class="play-video" :src="playsrc"></iframe>
			</div>
			<div class="showplaylist" v-if="showplaylist">
				<h3 align="center" style="font-size: 1.2rem;color: #fb7299;font-weight: bold;">{{playlist.name}}-{{playtitle}}</h3>
				<h3 align="center" style="font-size: 0.8rem;color: #333;">M3U8</h3>
				<div style="width: 100%;margin: 0 auto;">
					<a class="play-a" @click="playurl(v)" v-for="v in urlM3u8" :key="v.url">{{v.title}}</a>
				</div>
				<h3 align="center" style="font-size: 0.8rem;color: #333;">直链</h3>
				<div style="width: 100%;margin: 0 auto;">
					<a class="play-a" @click="playurl(v)" v-for="v in urlZl" :key="v.url">{{v.title}}</a>
				</div>
			</div>
			<div :class="['search-buttom',isFixed?'positionFixed':'positionRelative']">
				<img class="search-ma" src="./img/ma.png"></img><br>
				<span>---访问本站网页版请扫描上方二维码---</span><br>
				<span>本网站视频资源均来自第三方网站，若有侵权视频请联系{{email}}</span><br>
				<span>&copy {{year}} {{author}}</span>
			</div>
		</div>
		
		<script>
			new Vue({
				el:'.content',
				data:{
					searchname: "",
					email:'i@liujianjun.net',
					year:'2020',
					author:'横牫',
					jxurl:'http://jx.mw0.cc/?url=',
					showsearchlogo:true,
					showsearchinput:true,
					showsearchlist:false,
					showplaylist:false,
					showlazyload:false,
					playtitle:'',
					lists:[],
					playlist:[],
					isFixed:true,
					playsrc:"",
					showplayiframe:false,
					urlZl:[],
					urlM3u8:[]
				},
				methods:{
					search() {
						this.showlazyload = true;
						this.showsearchlist = false;
						this.showplayiframe = false;
						this.showplaylist = false;
						var wd = this.searchname;
						this.$http.get('./api.php?wd='+wd).then(res=>{
							this.lists=res.data.data;
							this.showlazyload = false;
							this.showsearchlist = true;
							this.isFixed=false;
						})
						this.searchname = "";
					},
					searchlist(info) {
						this.showsearchlist = false;
						this.showplaylist = true;
						this.playlist=info;
						this.urlZl=info.url.zl;
						this.urlM3u8=info.url.m3u8;
					},
					playurl(info) {
						this.showplayiframe=true;
						var url = info.url;
						var title = info.title;
						this.playsrc = this.jxurl + url;
						this.playtitle = title;
					}
				}
			});
		</script>
	</body>
</html>